<template>
  <el-dialog :visible.sync="isshow" :show-close="false" width="620px">
    <div class="title" slot="title">用户注册</div>
    <el-form :model="form" :rules="rules" ref="form" label-width="72px">
      <el-form-item label="头像" class="touxiang" prop="avatar">
        <el-upload
          class="avatar-uploader"
          :action="baseurl+'/uploads'"
          name="image"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <!-- <img
            v-if="form.avatar"
            :src="baseUrl + '/' + form.avatar"
            class="avatar"
          />-->
          <img v-if="form.avatar" :src="baseurl +'/'+form.avatar" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item prop="username" label="昵称">
        <el-row>
          <el-col :span="24">
            <el-input v-model="form.username"></el-input>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item prop="email" label="邮箱">
        <el-row>
          <el-col :span="24">
            <el-input v-model="form.email"></el-input>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item prop="phone" label="手机">
        <el-row>
          <el-col :span="24">
            <el-input v-model="form.phone"></el-input>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item prop="password" label="密码">
        <el-row>
          <el-col :span="24">
            <el-input v-model="form.password" show-password></el-input>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item prop="code" label="图形码">
        <el-row>
          <el-col :span="15">
            <el-input v-model="form.code"></el-input>
          </el-col>
          <el-col :span="8" :offset="1">
            <img class="register-code" @click="getnewCode" :src="newCode" alt />
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item prop="rcode" label="验证码">
        <!-- <el-input v-model="form.rcode"></el-input> -->
        <el-row>
          <el-col :span="15">
            <el-input v-model="form.rcode"></el-input>
          </el-col>
          <el-col :span="8" :offset="1">
            <el-button @click="dxyzm" :disabled="daojishi != 5">
              获取用户验证码
              <span v-if="daojishi != 5">{{daojishi}}s</span>
            </el-button>
          </el-col>
        </el-row>
      </el-form-item>
    </el-form>
    <div class="footer" slot="footer">
      <el-button @click="isshow=false">取消</el-button>
      <el-button type="primary" @click="qbyz('form')">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {getdxyzm,qrzc} from '@/api/register.js'
export default {
  data() {
    return {
      isshow: false,
      baseurl: process.env.VUE_APP_URL,
      newCode: process.env.VUE_APP_URL + "/captcha?type=sendsms",
      daojishi: 5,
      form: {
        avatar: "",
        username: "",
        email: "",
        phone: "",
        password: "",
        rcode: "",
        code: "",
      },
      rules: {
        avatar: [{ required: true, message: "请上传头像", trigger: "change" }],
        username: [
          { required: true, message: "请输入用户名", trigger: "change" },
        ],
        email: [
          // { required: true, message: "请输入邮箱", trigger: "change" },
          {
            validator: (rule, value, callback) => {
              let emailvalue = /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;
              if (emailvalue.test(value)) {
                callback();
              } else {
                callback(new Error("请输入正确的邮箱"));
              }
            },
            trigger: "change",
          },
        ],
        phone: [
          // { required: true, message: "请输入手机", trigger: "change" },
          //自定义表单验证
          {
            validator: (rule, value, callback) => {
              let phonevalue = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/;
              if (phonevalue.test(value)) {
                callback();
              } else {
                callback(new Error("请输入正确的手机号"));
              }
            },
            trigger: "change",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "change" },
          { min: 5, max: 8, message: "长度在5到8个字符", trigger: "change" },
        ],
        code: [
          // { required: true, message: "请输入验证码", trigger: "change" },
          { min: 4, max: 4, message: "长度为4字符", trigger: "change" },
          {
            validator: (rule, value, callback) => {
              let jsdcode = /^\d{4}$/;
              if (jsdcode.test(value)) {
                callback();
              } else {
                callback(new Error("输入4个数字"));
              }
            },
            trigger: "change",
          },
        ],
        rcode: [{ required: true, message: "请输入验证码", trigger: "change" }],
      },
    };
  },
  methods: {
    //获取短信验证码
    dxyzm() {
      let num = 0;
      this.$refs.form.validateField(["phone", "code"], (errorMessage) => {
        if (errorMessage === "") {
          num++;
        } else {
          this.$message.error("验证失败");
        }
        //如果验证成功就发送短信验证码
        //同时进入倒计时  如果不等于5 能显示并且禁用
        if (num == 2) {
          if (this.daojishi == 5) {
            getdxyzm({
              code: this.form.code,
              phone: this.form.phone,
            }).then((res) => {
              console.log(res);
            }).catch(error=>{
              console.log(error);
              
            });
          }
          this.daojishi--;
          let timeID = setInterval(() => {
            this.daojishi--;
            if (this.daojishi == 0) {
              clearInterval(timeID);
              this.daojishi = 5;
              this.newCode =
                process.env.VUE_APP_URL +
                "/captcha?type=sendsms&dwkhke=" +
                Date.now();
            }
          }, 1000);
        }
      });
    },
    //点击验证码更新
    getnewCode() {
      this.newCode =
        process.env.VUE_APP_URL + "/captcha?type=sendsms&dwkhke=" + Date.now();
    },
    qbyz(form) {
      this.$refs[form].validate((results) => {
        if (results) {
            // qrzc({
            // avatar : this.form.avatar.split('lic/')[1],
            // username :  this.form.username,
            // email :  this.form.email,
            // phone :  this.form.phone,
            // password :  this.form.password,
            // rcode:  this.form.rcode              
            // }).then(res=>{
            //   console.log(res);
              
            // })
            qrzc(this.form)
            .then(res=>{
              console.log(res);
              
            })
        } else {
          this.$message.error("验证失败");
        }
      });
    },
    handleAvatarSuccess(res) {
      // this.form.avatar = URL.createObjectURL(file.raw);
      this.form.avatar =  res.data.file_path
          
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg" || file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG或PNG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
  },
  watch: {
    isshow(newVal) {
      if (newVal == false) {
        // this.$refs.form.resetFields();
      }
    },
  },
};
</script>

<style>
.title {
  height: 40px;
  line-height: 40px;
  text-align: center;
  background: linear-gradient(to right, red, yellow);
}
.el-dialog__header {
  padding: 0 !important;
}
.touxiang {
  text-align: center;
  /* border: 10px solid black; */
}
.avatar-uploader .el-upload {
  border: 1px dashed black;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: black;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px !important;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.el-input__inner {
  border: 1px solid black !important;
}
.footer {
  text-align: center;
}
.el-dialog__body {
  padding-bottom: 15px !important;
}
.el-dialog__footer {
  padding: 0 !important;
  padding-bottom: 30px !important;
}
</style>